<template>
  <!-- 供应商/客户表单弹窗 -->
  <el-dialog
    :close-on-click-modal="false"
    v-model="visibleDialog"
    :title="props.title"
    width="1373px"
    draggable
    :close-on-press-escape="false"
    @close="closeDialog"
  >
    <div class="app-container" style="padding: 0">
      <el-card shadow="never" class="table-container">
        <!-- 预留功能 -->
        <!-- <template #header>
        <el-button type="success" @click="openDialog()"
          ><i-ep-plus />新增</el-button
        >
        <el-button
          type="danger"
          :disabled="ids.length === 0"
          :loading="deleteLoading"
          @click="handleDelete()"
          ><i-ep-delete />删除</el-button
        >
      </template> -->
        <!-- 数据表格 -->
        <el-table
          :data="contacts"
          style="width: 100%"
          :key="Math.random"
          :header-cell-style="{ backgroundColor: '#F0F8FF' }"
          max-height="640px"
          border
        >
          <el-table-column
            type="index"
            label="序号"
            align="center"
            width="90"
          />
          <el-table-column
            label="姓名"
            align="center"
            prop="contactName"
            min-width="120"
          />
          <el-table-column
            label="电话"
            align="center"
            prop="contactPhone"
            min-width="160"
          />
          <el-table-column
            label="邮箱"
            align="center"
            prop="contactMail"
            min-width="280"
            show-overflow-tooltip
          />
          <el-table-column
            label="地址"
            header-align="center"
            align="left"
            prop="contactAddress"
            min-width="520"
            show-overflow-tooltip
          />
        </el-table>
      </el-card>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog">关 闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import request from "@/utils/request";
import { useDictStoreHook } from "@/store/modules/dictionary"; // 引入
const dictionaryStore = useDictStoreHook();

defineOptions({
  name: "MDMPARTNERCONTACTEDIT",
  inheritAttrs: false,
});

const emit = defineEmits(["change-visible"]);

const props = defineProps({
  visible: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  data: {
    type: Object,
    default: () => {
      return [];
    },
  },
  isReadonly: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
});

const contacts = ref([]);

const visibleDialog = ref(false);
watch(
  () => props.visible,
  (newVal: boolean) => {
    visibleDialog.value = newVal;
  }
);

const checkMobile = (rule: any, value: any, callback: any) => {
  if (value != "") {
    let reg11 = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
    if (reg11.test(value)) {
      callback();
    } else {
      callback(new Error("请输入正确格式电话号"));
    }
  } else {
    callback();
  }
};

const rules = reactive({
  contactName: [
    { required: true, message: "请输入联系人姓名", trigger: "blur" },
  ],
  contactPhone: [
    { required: true, message: "请输入联系人电话", trigger: "blur" },
    { validator: checkMobile, trigger: "blur" },
  ],
  materialId: [
    { required: true, message: "请选择物料", trigger: "change" },
    { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" },
  ],
});

const formRef = ref(ElForm);

let formData = reactive({
  id: "",
  partnerId: "",
  contactName: "",
  contactPhone: "",
  contactMail: "",
  contactAddress: "",
  createTime: "",
  createdUserId: "",
  createdUserName: "",
  lastUpdateTime: "",
  lastUpdatedUserId: "",
  lastUpdatedUserName: "",
  deleted: "",
});

watch(
  () => props.data,
  (newVal: any) => {
    contacts.value = props.data;
  }
);

/** 关闭表单弹窗 */
function closeDialog() {
  visibleDialog.value = false;
  emit("change-visible", false);
  resetForm();
}

/** 重置表单 */
function resetForm() {
  formData.id = "";
  formData.partnerId = "";
  formData.contactName = "";
  formData.contactPhone = "";
  formData.contactMail = "";
  formData.contactAddress = "";
  formData.createTime = "";
  formData.createdUserId = "";
  formData.createdUserName = "";
  formData.lastUpdateTime = "";
  formData.lastUpdatedUserId = "";
  formData.lastUpdatedUserName = "";
  formData.deleted = "";
}

const loading = ref(false);

/** 供应商/客户保存提交 */
function handleSubmit() {
  formRef.value.validate(async (valid: any) => {
    if (valid) {
      loading.value = true;
      const text = formData.id ? "编辑" : "新增";
      await request({
        url: "/mdm/mdmpartner/save",
        method: "post",
        data: formData,
      }).finally(() => {
        loading.value = false;
      });
      ElMessage.success(text + `成功`);
      closeDialog();
      emit("reset-table", formData.id);
    }
  });
}

onMounted(() => {});

// 组件销毁时调用
onBeforeUnmount(() => {
  visibleDialog.value = false;
  emit("change-visible", false);
});
</script>
